<template>
  <div class="internationalblack">
    <div class="lists">
      <!-- 表头 -->
      <div class="internationalblack_top">
        <div class="tab-top" style="width: 40px;">{{$t("m.Serial")}}</div>
        <div class="tab-top" style="width: 140px;text-align: right;padding-right: 10px;">{{$t("m.Name")}}</div>
        <div class="tab-top">{{$t("m.Now")}}</div>
        <div class="tab-top">{{$t("m.Saleprice")}}</div>
        <div class="tab-top">{{$t("m.Buyprice")}}</div>
        <div :style="(tablist.id == '5'||tablist.id == '6')?'display:none;':''" class="tab-top">{{$t("m.Saleliang")}}</div>
        <div :style="(tablist.id == '5'||tablist.id == '6')?'display:none;':''" class="tab-top">{{$t("m.Buyliang")}}</div>
        <div :style="(tablist.id == '5'||tablist.id == '6')?'display:none;':''" class="tab-top">{{$t("m.Openinterest")}}</div>
        <div class="tab-top" style="color: #FFFFFF;">{{$t("m.Receivedyesterday")}}</div>
        <div class="tab-top">{{$t("m.Riseandfall")}}</div>
        <div class="tab-top">{{$t("m.Range")}}</div>
        <div class="tab-top">{{$t("m.Opening")}}</div>
        <div class="tab-top">{{$t("m.Highest")}}</div>
        <div class="tab-top">{{$t("m.Minimum")}}</div>
        <div class="tab-top" style="width: 140px;text-align: right;">{{$t("m.Code")}}</div>
      </div>
      <!-- 数据 -->
      <div class="internationalblack_body">
        <div
          class="listinfo_light"
          v-for="(item, index) in tablist.symbols"
          :key="index"
          @click="infolist(item, index)"
          :style="listinfo == index ? 'background: #4B4B4B' : ''"
          @dblclick="jump(item)"
          @contextmenu.prevent="rightclick(item.id)"
        >
          <div class="tab-li color-y" style="width: 40px;">{{ index + 1 || '- -' }}</div>
          <div class="tab-li color-y" style="width: 140px;text-align: right;padding-right: 10px;">{{ item.name || '- -' }}</div>
          <div :class="(old_list[item.code2] && old_list[item.code2].price) == (ticket[item.code2] && ticket[item.code2].price) ? 'tab-li color-y' : 'tab-li color_w bg_blue'">
            {{ ((ticket[item.code2] && ticket[item.code2].price) || 0).toFixed(2) || '- -' }}
          </div>
          <div :class="(old_list[item.code2] && [item.code2].ask) == (ticket[item.code2] && ticket[item.code2].ask) ? 'tab-li color_g' : 'tab-li color_blue'">
            {{ ((ticket[item.code2] && ticket[item.code2].ask) || 0).toFixed(2) || '- -' }}
          </div>
          <div :class="(old_list[item.code2] && old_list[item.code2].bid) == (ticket[item.code2] && ticket[item.code2].bid) ? 'tab-li color_g' : 'tab-li color_blue'">
            {{ ((ticket[item.code2] && ticket[item.code2].bid) || 0).toFixed(2) || '- -' }}
          </div>
          <div :style="(tablist.id == '5'||tablist.id == '6')?'display:none;':''" :class="(old_list[item.code2] && old_list[item.code2].asm) == (ticket[item.code2] && ticket[item.code2].asm) ? 'tab-li color-y' : 'tab-li color_o'">
            {{ (ticket[item.code2] && ticket[item.code2].asm) || '- -' }}
          </div>
          <div :style="(tablist.id == '5'||tablist.id == '6')?'display:none;':''" :class="(old_list[item.code2] && old_list[item.code2].bim) == (ticket[item.code2] && ticket[item.code2].bim) ? 'tab-li color-y' : 'tab-li color_o'">
            {{ (ticket[item.code2] && ticket[item.code2].bim) || '- -' }}
          </div>
          <div :style="(tablist.id == '5'||tablist.id == '6')?'display:none;':''" class="tab-li color-y">{{ (ticket[item.code2] && ticket[item.code2].position) || '- -' }}</div>
          <div class="tab-li" style="color: #FFFFFF;">{{ ((ticket[item.code2] && ticket[item.code2].close) || 0).toFixed(item.digit) || '- -' }}</div>
          <div :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tab-li color_r' : 'tab-li color_g'">
            {{ (ticket[item.code2] && ((ticket[item.code2] && ticket[item.code2].price) - (ticket[item.code2] && ticket[item.code2].close) || 0).toFixed(item.digit)) || '- -' }}
          </div>
          <div :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tab-li color_r' : 'tab-li color_g'">
            {{ ((ticket[item.code2] && ticket[item.code2].wave) || 0).toFixed(2) || '- -' }}%
          </div>
          <div :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tab-li color_r' : 'tab-li color_g'">
            {{ ((ticket[item.code2] && ticket[item.code2].open) || 0).toFixed(2) || '- -' }}
          </div>
          <div :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tab-li color_r' : 'tab-li color_g'">
            {{ ((ticket[item.code2] && ticket[item.code2].high) || 0).toFixed(2) || '- -' }}
          </div>
          <div :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tab-li color_r' : 'tab-li color_g'">
            {{ ((ticket[item.code2] && ticket[item.code2].low) || 0).toFixed(2) || '- -' }}
          </div>
          <div class="tab-li color-y" style="width: 140px;text-align: right;">{{ item.name_code || '- - ' }}</div>
        </div>
      </div>
    </div>
    <!-- 分页部分 -->
    <!-- <div class="pagelist" v-if="page_list">
      <div class="pages-title">共 {{ pages }} 页,当前第 {{ newpage }} 页.</div>
      <div @click="jumppages('pre')" v-if="newpage != 1" class="pages-pre">上一页</div>
      <div @click="jumppages('next')" v-if="newpage != pages" class="pages-next">下一页</div>
      <div class="pages-pagenum"><input type="number" placeholder="请输入页码数字" v-model="newpage" @input="pagesnum" /></div>
      <div @click="jumppages('btn')" class="pages-btn">跳转</div>
    </div> -->
    <!---右键菜单-->
    <div class="mine_menu" v-show="mine_menu.status" :style="'top:' + mine_menu.x + 'px;left:' + mine_menu.y + 'px'">
      <ul style="margin: 0px;padding: 0px;">
        <li @click="selectcheck()" style="color: #000000;">{{$t("m.Addzixuan")}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*, 推送数据 */
  }),
  watch: {
    newpage(val) {
      if (val == '' || val < 1 || val == null || val == undefined) {
        this.newpage = 0;
      } else if (val > this.pages) {
        this.newpage = this.pages;
      }
    },
    // page_list(val) {
    //   if (val == false) {
    //     $('.lists').css('height', '100%');
    //   } else if (val == true) {
    //     $('.lists').css('height', 'calc(100% - 35px)');
    //   }
    // },
    ticket(val) {

      let that = this;
      setTimeout(() => {
        return (that.old_list = val);
      }, 500);
    },

    symbos(val) {
      this.tablist = val;
      if(this.tablist.id=='5'){
        console.log(this.tablist.title,'2222')
      }
      // this.newpage = 1;
      // this.pageslist(this.tablist, 1);
    }
  },
  data() {
    return {
      id: '',
      listinfo: -1, //数据点击阴影效果
      page_list: false, //数据分页判断
      pages: 1, //分页总计
      newpage: 1, //当前页码
      mine_menu: {
        status: false,
        x: 0,
        y: 0
      },
      symbollist: [] /* 全部静态行情 */,
      tablist: [] /*, 当前数据 */,
      tablistcode: [], //当前页面的code码

      old_list: [] /* 对比行情数据 */
    };
  },
  mounted() {
    for (let i in this.symbol) {
      this.symbollist.push(this.symbol[i]);
    }
    if (this.symbollist[0] == undefined) {
      this.tablist = [];
    } else {
      this.tablist = this.symbollist[0];
      if(this.tablist.id=='5'){
        console.log(this.tablist.title,'11111')
      }
      // this.pageslist(this.tablist, 1);
    }
  },
  methods: {
    // 处理数据过多时候
    pageslist(infolist, pagesnum) {
      this.pages = Math.ceil(infolist.length / 50);
      if (infolist.length > 50) {
        this.page_list = true;
        if (Number(pagesnum) < 2) {
          // console.log('第一页');
          this.tablist = infolist.slice(0, 50);
        } else if (Number(pagesnum) == this.pages) {
          // console.log('最后页');
          let startnum = 50 * (Number(pagesnum) - 1);
          this.tablist = infolist.slice(startnum);
        } else {
          // console.log('第',pagesnum,'页')
          let startnum = 50 * (Number(pagesnum) - 1);
          let endnum = 50 * Number(pagesnum);
          this.tablist = infolist.slice(startnum, endnum);
        }
      } else {
        this.page_list = false;
      }
      if (this.tablist.length > 0) {
        this.tablistcode = [];
        for (let i = 0; i < this.tablist.length; i++) {
          this.tablistcode[i] = this.tablist[i].code;
        }
        this.tablistcode = this.tablistcode.join(',');
        this.$store.commit('set', { tablistcode: this.tablistcode });
      }
    },
    // 输入跳转页码
    pagesnum() {
      this.newpage = Number(this.newpage);
    },
    // 分页按钮
    jumppages(pageinfo) {
      if (pageinfo == 'pre') {
        // console.log('上一页')
        this.newpage--;
      } else if (pageinfo == 'next') {
        // console.log('下一页')
        this.newpage++;
      } else if (pageinfo == 'btn') {
        // console.log('跳转')
        this.newpage = Number(this.newpage);
      }
      this.pageslist(this.symbos.symbols, this.newpage);
    },
    //鼠标右键
    rightclick(id) {
      this.id = id;
      this.mine_menu.status = true;
      this.mine_menu.x = event.pageY;
      this.mine_menu.y = event.pageX;
    },
    // 加入自选
    selectcheck() {
      var that = this;
      // that.btnlist = false;

      if (this.$svcInvoke.config._token) {
        return that.Optional();
      } else {
        if (localStorage.getItem('_token')) {
          this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
          return that.Optional();
        } else {
          return this.$router.push({ path: '/' });
        }
      }
    },
    Optional() {
      this.mine_menu.status = false;
      this.$post('addons/tf-futures/self-check/add', {
        symbol_id: this.id
      }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.$notify.success(res.message || '设置成功！');
        } else {
          this.$notify.error(res.message || '设置失败！');
        }
      });
    },
    infolist(item, index) {
      this.listinfo = index;
      this.$store.commit('trade/select', item);
    },
    //双击跳转
    jump(item) {
      this.$store.commit('set', { isinclass: 4 });
      this.$store.commit('trade/select', item);
    }
  }
};
</script>

<style scoped lang="less">
// 最外层盒子
.internationalblack {
  width: 100%;
  height: 100%;
  font-size:16px;
  font-weight: 600;
  // 行情部分
  .lists {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    .internationalblack_top {
      height: 60px;
      min-width: 1800px;
	  line-height: 60px;
      border-bottom: 1px solid red;
      .tab-top {
        text-align: center;
        width: 85px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: #00ffe9;
        box-sizing: border-box;
      }
    }
    .internationalblack_body {
      min-width: 1800px;
      height: calc(100% - 32px);
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding-bottom: 10px;
      .listinfo_light {
        cursor: pointer;
        width: 100%;
        height: 30px;
        .tab-li {
          text-align: center;
          width: 85px;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          box-sizing: border-box;
        }
      }
    }
  }
  // 分页部分
  .pagelist {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .pages-title {
      width: 150px;
    }
    .pages-pre,
    .pages-next,
    .pages-btn {
      margin: 0 5px;
      width: 85px;
      height: 22px;
      border-radius: 3px;
      background: #c93800;
      text-align: center;
      line-height: 22px;
      cursor: pointer;
    }
    .pages-pagenum {
      width: 65px;
      height: 22px;
      input {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        border: none;
        text-align: center;
      }
    }
  }
}
// 右键菜单设定
.mine_menu {
  cursor: pointer;
  height: 20px;
  // width: 100px;
  position: fixed;
  min-height: 9px;
  padding: 1px 5px;
  background: #ffffff;
  ul {
    height: 20px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    li {
      width: 100%;
      line-height: 20px;
      text-align: center;
      list-style-type: none;
    }
  }
}

/* 颜色设定*/
.color-y {
  color: #ffff00;
}

.color_black {
  color: #000000;
}

.color_blue {
  color: #7fcdff;
}

.color_g {
  color: #00dc00;
}

.color_o {
  color: #ff700d;
}

.color_r {
  color: #ff210d;
}

.color_w {
  color: #ffffff;
}

.bg_blue {
  background: blue;
}
</style>
